import React, { useEffect, useState } from 'react'
import styles from './index.module.css'
import { NavBar, Loading, Empty, Divider, Button, Icon, Popup, Field, Toast } from 'react-vant'
import { useParams, useNavigate } from 'react-router-dom'
import { getArticle } from '../../api/article'
import { addComments } from '../../api/comment'
import { relative } from '../../utils/dayjs'
import Followed from '../../components/followed'
import Liked from '../../components/licked'
import CommentList from '../../components/comment-list'
import './github-markdown.css'
import Collected from '../../components/collected';
export default () => {
        const [info, setInfo] = useState()
        const [isloading, setIsloading] = useState(false)
        const [isloaded, setIsloaded] = useState(false)
        const [message, setMessage] = useState()
        const [showPopup, setShowPopup] = useState(false);
        const [item, setItem] = useState({});
        const navigate = useNavigate()
        const params = useParams();
        useEffect(async () => {
                setIsloading(true)
                const res = await getArticle(params.id)
                setInfo(res.data.data)
                console.log(res.data.data);
                setIsloading(false)
                setIsloaded(true)
        }, []);
        const addComment = async () => {
                const res = await addComments({
                        target: info.art_id,
                        content: message
                })
                setItem(res.data.data.new_obj)
                Toast('发表评论成功')
                setShowPopup(false)
        }
        const render = () => {
                if (isloading) {
                        return (
                                <div className={styles.center}><Loading color="#1989fa" /></div>)

                } else {
                        if (info) {
                                return (<div className='markdown-body'>
                                        {/* 写评论弹出层 */}
                                        <Popup visible={showPopup} position="bottom" onClose={setShowPopup} style={{ height: '20%' }} >
                                                <div className={styles.writeComment}>
                                                        <Field
                                                                value={message}
                                                                autosize={{ maxHeight: 72, minHeight: 50 }}
                                                                type="textarea"
                                                                maxlength="50"
                                                                placeholder="请输入评论"
                                                                showWordLimit
                                                                onChange={setMessage}
                                                        />
                                                        <Button onClick={addComment} disabled={!message}>发表</Button>
                                                </div>
                                        </Popup>
                                        <h1 className={styles.h1}>{info.title}</h1>
                                        <div className={styles.header}>
                                                <div className={styles.left}>
                                                        <img src={info.aut_photo} alt="" />
                                                        <div>
                                                                <span>{info.aut_name}</span>
                                                                <span className={styles.time}>{relative(info.pubdate)}</span>
                                                        </div>
                                                </div>
                                                <Followed is_followed={info.is_followed} aut_id={info.aut_id} />
                                        </div>
                                        <div id="abc" className={styles.context} dangerouslySetInnerHTML={{ __html: info.content }} >
                                        </div>
                                        <Divider>正文结束</Divider>
                                        <div id="comment">
                                                {/* 评论列表 */}
                                                < CommentList art_id={info.art_id} item={item} type="a" clickOk={true} />
                                        </div>
                                        {/* 底部区域 */}
                                        <div className={styles.bottom}>
                                                <div className={styles.write}>
                                                        <button className={styles.comment} onClick={() => setShowPopup(true)}>写评论</button>
                                                </div>
                                                <Button onClick={toto}><Icon name="comment-o" badge={{ content: info.comm_count }} /></Button>
                                                <Collected art_id={info.art_id} collected={info.is_collected} />
                                                <Liked art_id={info.art_id} attitude={info.attitude} ></Liked>
                                                <Button ><Icon name="share" /></Button>
                                        </div>
                                </div>)
                        } else {
                                <Empty image="search" description="加载失败" />
                        }
                }
        }
        const toto = () => {
                const div = document.querySelector('#abc')
                console.log(div.clientHeight);

                window.scrollTo(0, div.clientHeight)
        }
        return (<div className={styles.detail}>
                <NavBar
                        title="黑马头条"
                        leftArrow
                        onClickLeft={() => navigate('/home')}
                        fixed
                />
                {render()}

        </div>)

}